<template>
    <div class="regist">
        <el-form v-model="regist" style="width: 400px;padding-top: 60px;margin-left: 40px;"
      ref="numberValidateForm" label-width="100px" class="demo-ruleForm" :rules="rules">
        <el-form-item label="用户名" prop="username">
            <el-input  v-model="regist.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password"> 
            <el-input type="password" v-model="regist.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校" prop="school"> 
            <el-input type="text" v-model="regist.school" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname"> 
            <el-input type="text" v-model="regist.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age"> 
            <el-input type="text" v-model="regist.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender"> 
            <el-input type="text" v-model="regist.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button style="width:100px" type="primary" @click="jump">注册</el-button>
            <el-button style="width:100px" type="primary" @click="jump2">登录</el-button>

        </el-form-item>
        </el-form>
    </div>
</template>
<script>
import{post}from '../utils/fecth'
export default ({
    name:'regist',
    data(){
        var validateusername = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('用户名不能为空'));
        }
      };
      var validatePass = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        }
      };
      var validateschool = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('学校不能为空'));
        }
      };
      var validatenickname = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('昵称不能为空'));
        }
      };
      var validateage = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
      };
    var validategender = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('性别不能为空'));
        }
      };
        return{
            regist:{},
            rules: {
                username: [
                    { validator: validateusername, trigger: 'blur' }
                ],
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                school: [
                    { validator: validateschool, trigger: 'blur' }
                ],
                nickname: [
                    { validator: validatenickname, trigger: 'blur' }
                ],
                age: [
                    { validator: validateage, trigger: 'blur' }
                ],
                gender: [
                    { validator: validategender, trigger: 'blur' }
                ],

            }
        }
    },
    methods:{
        async jump(){
            // console.log(this.regist)
            const data = await post('user/regist',{
                    username:this.regist.username,
                    password:this.regist.password,
                    school:this.regist.school,
                    nickname:this.regist.nickname,
                    age:this.regist.age,
                    gender:this.regist.gender
            })
            if(data.success == true){
                this.$router.push({
                    name:'login'
                })
            }
            console.log(data)
        },
        jump2(){
            this.$router.push({
                    name:'login'
            })
        }
    }
})
</script>
<style >
.regist{
    width: 600px;
    height: 500px;
    box-shadow: 0 0 6px #333;
    margin: 100px auto;
}
</style>